﻿<template>
<form-container
    :title="formData.id ? '编辑点赞' : '增加点赞'"
    :width="600"
    :visible="visible"
    :destroy-on-close="true"
    @close="onClose"
>
    <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
        <a-form-item label="点赞者id" name="loveuserId">
          <a-select v-model:value="formData.loveuserId" show-search placeholder="请选择点赞者id" :options="fkBuUserOptions" />
        </a-form-item>
        <a-form-item label="帖子id" name="postId">
          <a-select v-model:value="formData.postId" show-search placeholder="请选择帖子id" :options="fkBuPostOptions" />
        </a-form-item>
        <a-form-item label="创建时间" name="createTime">
          <a-date-picker v-model:value="formData.createTime" value-format="YYYY-MM-DD HH:mm:ss" show-time placeholder="请选择创建时间" style="width: 100%" />
        </a-form-item>
    </a-form>
    <template #footer>
        <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
    </template>
</form-container>
</template>

<script setup name="buClickForm">
  import { cloneDeep } from 'lodash-es'
  import { required } from '@/utils/formRules'
  import buClickApi from '@/api/biz/buClickApi'

  // 抽屉状态
  const visible = ref(false)  
  // 定义emit事件
  const emit = defineEmits({ successful: null }) 
  //表单
  const formRef = ref()  
  // 表单数据，也就是默认给一些数据
  const formData = ref({})
  //提交等待
  const submitLoading = ref(false)
  
  
  
  const fkBuUserOptions = ref() //点赞者id数据
  const getFkBuUserOptions= () => {
  buClickApi.clickFkBuUserSelector().then((data) => {
    fkBuUserOptions.value = data
  })
  }
  
  const fkBuPostOptions = ref() //帖子id数据
  const getFkBuPostOptions= () => {
  buClickApi.clickFkBuPostSelector().then((data) => {
    fkBuPostOptions.value = data
  })
  }
  
   
  // 打开抽屉 
  const onOpen = (record) => {
      visible.value = true //显示抽屉
      getFkBuUserOptions()
      
      getFkBuPostOptions()
      
	  //表单数据
      formData.value = {
      }
      if (record) {
        let recordData = cloneDeep(record)
        formData.value = Object.assign({}, recordData)
        //const param = {
        //  id: record.id
        //}
        //buClickApi.buClickDetail(param).then((data) => {
        //  formData.value = Object.assign({}, data)
        //  })
      }  
  }
  
  // 关闭抽屉
  const onClose = () => {
      formRef.value.resetFields()
      formData.value = {}
      visible.value = false
  }
  
  // 默认要校验的
  const formRules = {
      loveuserId: [required('请输入点赞者id')],
      postId: [required('请输入帖子id')],
  }

  // 验证并提交数据
  const onSubmit = () => {
      formRef.value.validate().then(() => {
          submitLoading.value = true
          const formDataParam = cloneDeep(formData.value)
          buClickApi
              .submitForm(formDataParam, formDataParam.id)
              .then(() => {
                  onClose()
                  emit('successful')
              })
              .finally(() => {
                  submitLoading.value = false
              })
      })
  }
  // 抛出函数
  defineExpose({
  onOpen
  })
</script>

